#{extends 'User.html' /}

#{set "moreStyles"}

<style>
    .items div {
        float: left;
        width: 630px;
    }

    .scrollable {
        width: 620px;
        height: 130px;
    }

    .scrollable img {
        width: 127px;
        height: 90px;
    }

    div.items div div.tab_caption {
        width: 134px;
        margin: 0;
        padding: 5px 10px 5px 10px;
        border-right: 1px #999 dotted;
    }

    a.browse {
        margin-top: 50px;
    }

</style>
#{/set}

<div id="moreinfors" style="z-index: 800;float: right;">
    <div style="border: solid 1px #d3d3d3">
        <div class="m_header">&{'user.topic.online_support'}</div>
        <ul>
            <li>
                <div><b>Kinh Doanh 1</b></div>
                <div>
                    <a href="ymsgr:sendim?yamaguchi2" mce_href="ymsgr:sendim?yamaguchi2" border="0">
                        <img xsrc="http://opi.yahoo.com/online?u=yamaguchi2&t=2"
                             src="http://opi.yahoo.com/online?u=yamaguchi2&t=2" width="100px">
                    </a>
                </div>
                <div>
                    <a href="skype:yamaguchi_kd?status"><img src="http://mystatus.skype.com/balloon/yamaguchi_kd"
                                                             alt="My status" width="90px"></a>
                </div>
            </li>
            <li>
                <div><b>Kinh Doanh 2</b></div>
                <div><a href="ymsgr:sendim?yamaguchi2" mce_href="ymsgr:sendim?yamaguchi2" border="0">
                    <img xsrc="http://opi.yahoo.com/online?u=yamaguchi2&t=2"
                         src="http://opi.yahoo.com/online?u=yamaguchi2&t=2" width="100px">
                </a>
                </div>
                <div>
                    <a href="skype:doducthanh_kd?status"><img src="http://mystatus.skype.com/balloon/doducthanh_kd"
                                                              alt="My status" width="90px"></a>
                </div>
            </li>
            <li>
                <div><b>Hotline</b></div>
                <div>0949.409.690</div>
            </li>

        </ul>
    </div>

    <br/>

    <div style="border: solid 1px  #d3d3d3; ">
        <div class="m_header">&{'user.topic.moreinfo_title'}</div>
        <ul>
        #{list items:topic.moreInfos.asList(), as:"moreInfo"}
            <li>${moreInfo.title} . <a href="${moreInfo.link}">View</a></li>
        #{/list}
            </li>
        </ul>
    </div>

</div>
<script type="text/javascript">

    $(document).ready(function () {
        $(".scrollable").scrollable();
    });

</script>

<div id="mainContent" style="float: left;width: 650px">

    <img src="@{User.getTopicImage(topic.id, 2)}" alt="${topic.getShortTitle()}" style="float: left; padding-right:20px; max-width: 500px"/>

    <div class="topic_title_box">
        <h1> ${topic.title}</h1>

        <p style="color:gray"> ${topic.brief} </p>

        <div> &{'topic.cost'}:  ${(topic.cost!=null && topic.cost > 0) ? topic.cost : "N/A"}</div>
    </div>

    <br class="clearfloat">

    <h1>&{'topic.desc.title'}</h1>
${topic.desc.raw()}

#{if relatedTopics.size()>0  }
    <h3>&{'user.topic.related_title'}</h3>
#{/if}

</div>
<br class="clearfloat">

#{if relatedTopics.size()>0  }
<div id="sliderContain" >
    <a class="prev browse left disabled"></a>

    <div class="scrollable">
        <!-- root element for the items -->
        <div class="items" style="left: 0px; ">
            #{list items:relatedTopics, as:'topic' }
                #{if topic_index %5 ==1 }
                <div>
                #{/if}
                <div class="tab_caption">
                    <h4>
                        #{a @User.topic(topic.code, topic.getShortTitle())} ${topic.name}
                        #{/a}
                    </h4>
                    #{a @User.topic(topic.code, topic.getShortTitle())}
                        <img src="@{User.getTopicImage(topic.topicId, 1)}" width="100" height="100" alt="${topic.name}">
                    #{/a}
                </div>
                #{if topic_index % 5 ==0 || topic_isLast}
                </div>
                #{/if}
            #{/list}
        </div>
    </div>
    <a class="next browse right"></a>
</div>
#{/if}

<br class="clearfloat">
